<!-- eslint-disable vue/multi-word-component-names -->

<template>
    <div class='box'>
        <div class="box-left">

            <BoxLeft1 />
            <div class="box-left-2">
                <BoxLeftEcharts />
                <Box2LeftEcharts />
            </div>
            <BoxLeft3 />
        </div>
        <div class="box-right">
            <BoxRight1 />
            <BoxRight2 />
            <div class="box-right-3">
                <img src="../../../image/home2.jpeg" alt="">
            </div>
            <div class="box-right-4">
                <div class="box-right-11">公告栏</div>
                <div class="box-right-112">
                    <text class="box-right-1121">通知</text>事水报共越老写后和通方部难必求.
                </div>
                <div class="box-right-112">
                    <text class="box-right-1121">通知</text>事水报共越老写后和通方部难必求.
                </div>
                <div class="box-right-112">
                    <text class="box-right-1121">通知</text>事水报共越老写后和通方部难必求.
                </div>
                <div class="box-right-112">
                    <text class="box-right-1121">通知</text>事水报共越老写后和通方部难必求.
                </div>
                <div class="box-right-112">
                    <text class="box-right-1121">通知</text>事水报共越老写后和通方部难必求.
                </div>
                <div class="box-right-112">
                    <text class="box-right-1121">通知</text>事水报共越老写后和通方部难必求.
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">

// import dayjs from 'dayjs'

import BoxLeftEcharts from '@/components/BoxLeftEcharts/BoxLeftEcharts.vue';
import Box2LeftEcharts from '@/components/Box2LeftEcharts/index.vue';
import BoxLeft1 from '@/components/BoxLeft1/index.vue';
import BoxLeft3 from '@/components/BoxLeft3/index.vue';
import BoxRight1 from '@/components/BoxRight1/index.vue';
import BoxRight2 from '@/components/BoxRight2/index.vue';


</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
}

.box-left {
    width: 68%;
}

.box-right {
    width: 30%;
    margin-left: 10px;





    .box-right-3 {
        height: 120px;
        margin-top: 10px;

        img {
            width: 100%;
            height: 120px;
        }
    }

    .box-right-4 {
        height: 250px;
        margin-top: 10px;
        background-color: #fff;

        .box-right-11 {
            margin: 10px;
            font-size: 16px;
        }

        .box-right-112 {
            font-size: 15px;
            margin: 10px 10px;
        }

        .box-right-1121 {
            color: red;
            background-color: rgb(219, 162, 162);
            padding: 5px;
            font-size: 10px;
            border-radius: 5px;
            margin: 0px 10px;
        }
    }
}

.box-left-2 {
    width: 100%;
    height: 240px;
    margin-top: 10px;
    display: flex;


}
</style>